AngularJS Includes
AngularJS এর সাথে, আপনি একটি বহিরাগত ফাইল থেকে HTML যোগ করতে পারেন।
AngularJS Includes
AngularJS এর সাথে, আপনি ng-include নির্দেশিকা ব্যবহার করে HTML সামগ্রী অন্তর্ভুক্ত করতে পারেন:
উদাহরণ
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>দ্রষ্টব্য:
যে ফাইলটি যোগ করা হবে তার নাম অবশ্যই একক উদ্ধৃতিতে আবদ্ধ থাকতে হবে: 'myFile.htm'
AngularJS কোড যোগ করুন
আপনি ng-include নির্দেশের সাথে যে HTML ফাইলগুলি অন্তর্ভুক্ত করেন সেগুলিতে AngularJS কোডও থাকতে পারে:
myTable.htm:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>আপনার ওয়েবপৃষ্ঠায় "myTable.htm" ফাইল যোগ করুন, এবং সমস্ত AngularJS কোড কার্যকর করা হবে, এমনকি অন্তর্ভুক্ত ফাইলের ভিতরের কোডটিও:
উদাহরণ
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>বর্ণনা:
এই উদাহরণে, myTable.htm ফাইলটি ng-include-এর সাথে অন্তর্ভুক্ত করা হয়েছে। এই ফাইলটিতে ng-রিপিট নির্দেশিকা রয়েছে, যা AngularJS কন্ট্রোলার থেকে ডেটা ব্যবহার করে।
ক্রস ডোমেন যোগ করুন
ডিফল্টরূপে, ng-include নির্দেশিকা আপনাকে অন্য ডোমেন থেকে ফাইল অন্তর্ভুক্ত করার অনুমতি দেয় না।
অন্য ডোমেন থেকে ফাইলগুলি অন্তর্ভুক্ত করতে, আপনি আপনার অ্যাপের কনফিগারেশন ফাংশনে বৈধ ফাইল এবং/অথবা ডোমেনগুলির একটি সাদা তালিকা যোগ করতে পারেন:
উদাহরণ:
<body ng-app="myApp">
<div ng-include="'https://tryit.jassifteam.com/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://tryit.jassifteam.com/**'
]);
});
</script>
</body>গুরুত্বপূর্ণ নোট:
নিশ্চিত করুন যে গন্তব্য সার্ভার ক্রস-ডোমেন ফাইল অ্যাক্সেসের অনুমতি দেয়। যদি সার্ভার ক্রস-ডোমেন অনুরোধগুলিকে ব্লক করে, তাহলে ফাইলটি যোগ করা যাবে না।
সুবিধা অন্তর্ভুক্ত
কোড পুনঃব্যবহার
একই HTML কোড একাধিক পৃষ্ঠায় ব্যবহার করা যেতে পারে
সহজ রক্ষণাবেক্ষণ
একটি অবস্থানের পরিবর্তন সমস্ত পৃষ্ঠাগুলিতে প্রতিফলিত হবে
মডুলার গঠন
বড় অ্যাপ্লিকেশনগুলিকে ছোট, পরিচালনাযোগ্য খণ্ডে বিভক্ত করা যেতে পারে
এইচটিএমএল রিপার্টিশনিং
হেডার, ফুটার, নেভিগেশন ইত্যাদি আলাদা ফাইল হিসেবে রাখা যেতে পারে
একটি বাস্তব উদাহরণ
একটি ওয়েবসাইটে সাধারণ উপাদান যোগ করতে ng-include কীভাবে ব্যবহার করবেন তার একটি উদাহরণ:
header.html
<হেডার> <nav> <ul><li> <li><a href="#">বাড়ি</a></li>৷ <li><a href="#">সম্পর্কে</a></li> <li><a href="#">যোগাযোগ</a></li> </ul> </nav> </header>main.html
<body ng-app="myApp"> <div ng-include="'header.html'"></div> <প্রধান> <h1>স্বাগত</h1> <p>প্রধান বিষয়বস্তু</p> </প্রধান> <div ng-include="'footer.html'"></div> </body>অনুশীলন করুন
নীচের অনুশীলনে ng-include নির্দেশিকা সম্পর্কে আপনার বোঝার পরীক্ষা করুন:
AngularJS টিউটোরিয়াল অন্তর্ভুক্ত করে
সর্বোত্তম অনুশীলন:
হেডার, ফুটার, নেভিগেশন ইত্যাদির মতো এইচটিএমএল উপাদানের পুনরাবৃত্তির জন্য ng-include ব্যবহার করুন। এটি আপনার কোড পরিচালনা করা সহজ করে তুলবে।